﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
<title>js封装库(smarterjs)-demos</title>
<link type="text/css" href="../css/reset.css" rel="stylesheet"/>
<link type="text/css" href="../css/style.css" rel="stylesheet" />
<script type="text/javascript" src="../js/function.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../extends/extend_drag.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
</head>
<body>
<header id="header" class="layout">
    <div class="logo fl">
        <hgroup>
            <h1><a href="#">smarter<span>js</span></a></h1>
            <h2>js封装库(smarterjs)开发示例页面</h2>
        </hgroup>
    </div>
    <div class="links fr">
        <div class="links-mark">
            <a href="#"  class="links-insert">加入书签</a>
        </div>
        <div class="links-me">
            <a href="#">关于我的</a>
            <ul class="links-list">
                <li><a href="###">个人中心</a></li>
                <li><a href="###">查看简历</a></li>
                <li><a href="###">我的微博</a></li>
                <li class="links-login"><a href="###">登入后台</a></li>
            </ul>
        </div>
    </div>
</header>
<nav id="nav" class="layout" name="nav">
    <ul>
        <li><a href="#">博客首页</a></li>
        <li><a href="#">网事新闻</a></li>
        <li><a href="#">说说记录</a></li>
        <li><a href="#">技术记载</a></li>
        <li><a href="#">谈天说地</a></li>
        <li><a href="#">图文特效</a></li>
        <li><a href="#">工具集合</a></li>
        <li><a href="#">悦读收藏</a></li>
    </ul>
</nav>
<div id="content" class="layout">
    <article id="article" class="fl">
        <section class="section" id="flash">
            <ul>
                <li><a href="#"><img src="../images/banner1.jpg" /></a></li>
                <li style="display:none"><a href="#"><img src="../images/banner1.jpg" /></a></li>
                <li style="display:none"><a href="#"><img src="../images/banner1.jpg" /></a></li>
            </ul>
        </section>
        <section class="section" id="newlist">
            <div class="arc-section">
                <h2 class="arc-title"><a href="#">media query(媒体查询)和media type(媒体类型)-了解下那些不常用的设备</a></h2>
                <p class="arc-desc">media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视..</p>
                <p class="arc-other"><span class="arc-tag fl">标签：媒体查询</span><span class="arc-time fr">时间：2015-07-02 &nbsp;&nbsp;<strong><a href="#"> 1 </a></strong>条评论</span></p>
            </div>
            
            <div class="arc-section">
                <h2 class="arc-title"><a href="#">media query(媒体查询)和media type(媒体类型)-了解下那些不常用的设备</a></h2>
                <p class="arc-desc">media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视..</p>
                <p class="arc-other"><span class="arc-tag fl">标签：媒体查询</span><span class="arc-time fr">时间：2015-07-02 &nbsp;&nbsp;<strong><a href="#"> 1 </a></strong>条评论</span></p>
            </div>
            
            <div class="arc-section">
                <h2 class="arc-title"><a href="#">media query(媒体查询)和media type(媒体类型)-了解下那些不常用的设备</a></h2>
                <p class="arc-desc">media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视..</p>
                <p class="arc-other"><span class="arc-tag fl">标签：媒体查询</span><span class="arc-time fr">时间：2015-07-02 &nbsp;&nbsp;<strong><a href="#"> 1 </a></strong>条评论</span></p>
            </div>
            
            <div class="arc-section">
                <h2 class="arc-title"><a href="#">media query(媒体查询)和media type(媒体类型)-了解下那些不常用的设备</a></h2>
                <p class="arc-desc">media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视..</p>
                <p class="arc-other"><span class="arc-tag fl">标签：媒体查询</span><span class="arc-time fr">时间：2015-07-02 &nbsp;&nbsp;<strong><a href="#"> 1 </a></strong>条评论</span></p>
            </div>            
        </section>
    </article>
    <aside id="aside" class="fr">
       <section class="asi-special asi-section">
            <h2>专题推荐</h2>
            <ul>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
                <li><a href="#">甩掉CSS3各种前缀</a></li>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
                <li><a href="#">甩掉CSS3各种前缀</a></li>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
            </ul>
       </section>
       <section class="asi-good asi-section">
            <h2>精彩博文</h2>
            <ul>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
                <li><a href="#">甩掉CSS3各种前缀</a></li>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
                <li><a href="#">甩掉CSS3各种前缀</a></li>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
            </ul>
       </section>
       <section class="asi-list asi-section">
            <h2>点评排行</h2>
            <ul>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
                <li><a href="#">甩掉CSS3各种前缀</a></li>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
                <li><a href="#">甩掉CSS3各种前缀</a></li>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
            </ul>
       </section>
       <section class="asi-list asi-section">
            <h2>猜你喜欢</h2>
            <ul style="display:none">
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
                <li><a href="#">甩掉CSS3各种前缀</a></li>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
                <li><a href="#">甩掉CSS3各种前缀</a></li>
                <li><a href="#">高效可行的调试工具和方法</a></li>
                <li><a href="#">HTML5十五大新特性</a></li>
            </ul>
       </section>
    </aside>
    <div id="imgtext" class="layout">
        <div class="imgtext-flow">
            <a href="#"><img src="../images/imgtext-flow1.jpg"/></a>
            <p>多肉植物 月光女神</p>
        </div>
        <div class="imgtext-flow">
            <a href="#"><img src="../images/imgtext-flow2.jpg"/></a>
            <p>治家森活多肉植物 姬秋丽老桩</p>
        </div>
        <div class="imgtext-flow">
            <a href="#"><img src="../images/imgtext-flow3.jpg"/></a>
            <p>劳尔 韩国进口多肉植物</p>
        </div>
        <div class="imgtext-flow">
            <a href="#"><img src="../images/imgtext-flow4.jpg"/></a>
            <p>白牡丹，娇俏如牡丹</p>
        </div>
        <div class="imgtext-flow">
            <a href="#"><img src="../images/imgtext-flow5.jpg"/></a>
            <p>治家森活多肉植物 姬秋丽老桩</p>
        </div>
        <div class="imgtext-flow">
            <a href="#"><img src="../images/imgtext-flow6.jpg"/></a>
            <p>多肉植物 月光女神</p>
        </div>
        <div class="imgtext-flow">
            <a href="#"><img src="../images/imgtext-flow7.jpg"/></a>
            <p>治家森活多肉植物 姬秋丽老桩</p>
        </div>
        <div class="imgtext-flow">
            <a href="#"><img src="../images/imgtext-flow8.jpg"/></a>
            <p>多肉植物 月光女神</p>
        </div>
    </div>
    <div id="mask">
                    
    </div>
    <div id="link-login">
        <h2><span class="link-close">关闭</span>后台登录</h2>
        <div class="login-box">
            <form>
                <p>Name：<input name="mark-name" type="text"/></p>
                <p>PASS：<input name="mark-url" type="text"/></p>
                <p><input name="mark-url" type="button" value="CONFIRM"/></p>
            </form>
        </div>
    </div>
    <div id="link-book">
        <h2><span class="link-close">关闭</span>加入书签</h2>
        <div class="book-box">
            <form>
                <p>名称：<input name="mark-name" type="text"/></p>
                <p>地址：<input name="mark-url" type="text"/></p>
                <p><input name="mark-url" type="button" value="确认添加"/></p>
            </form>
        </div>
    </div>
    <div id="shareout">
        <h2>分享到</h2>
        <ul>
            <li>+ <a href="#" class="a">一键分享</a></li>
            <li>+ <a href="#" class="b">新浪微博</a></li>
            <li>+ <a href="#" class="c">人人网</a></li>
            <li>+ <a href="#" class="d">百度相册</a></li>
            <li>+ <a href="#" class="e">腾讯朋友</a></li>
            <li>+ <a href="#" class="f">豆瓣网</a></li>
            <li>+ <a href="#" class="g">百度首页</a></li>
            <li>+ <a href="#" class="h">和讯微博</a></li>
            <li>+ <a href="#" class="i">QQ 空间</a></li>
            <li>+ <a href="#" class="j">百度搜藏</a></li>
            <li>+ <a href="#" class="k">腾讯微博</a></li>
            <li>+ <a href="#" class="l">开心网</a></li>
            <li>+ <a href="#" class="m">百度贴吧</a></li>
            <li>+ <a href="#" class="n">搜狐微博</a></li>
            <li>+ <a href="#" class="o">QQ 好友</a></li>
            <li>+ <a href="#" class="p">更多...</a></li>
        </ul>
        <div class="share-footer"><a href="###">百度分享+&nbsp;&nbsp;</a><span></span></div>
    </div>
</div>
<footer id="footer" class="layout" name="footer">
    js封装库(smarterjs) 示例页面 &copy; 2014-2015
</footer>
</body>
</html>